<script setup lang="ts">
import { onMounted, nextTick, ref, reactive, watch, computed, onBeforeMount, shallowRef } from 'vue'
import { useRouter } from "vue-router"
import mitt from "../../assets/js/mitt"
import ChartVue from './Chart.vue';
import MenuVue from './Menu.vue';
const isChart = ref<boolean>(false),
  value = ref<string>(""),
  data = reactive([
    {
      id: 1,
      value: [
        {
          name: "mrc",
          age: 19
        },
        {
          name: "cyz",
          age: 25
        }
      ]
    },
    {
      id: 2,
      value: [
        {
          name: "zzt",
          age: 22
        },
        {
          name: "sq",
          age: 223
        }
      ]
    }
  ]),
  dataComputed = computed(() => {
    return JSON.parse(JSON.stringify(data))
  }),
  options = reactive<{ value: number, label: string }[]>([
    {
      value: 1,
      label: "one"
    },
    {
      value: 2,
      label: "two"
    }
  ])

  const op1=reactive({
    a:5,
    b:65
  })
const deleteComp = (): void => {
  value.value = ""
},
  selectChange = (): void => {
  }

onMounted(() => {
  console.log();
  
  mitt.on("dataEmit", (dataEmit: any) => {
    data.forEach((item, index) => {
      if (item.id == dataEmit.id) {
        data[index].value = dataEmit.value
      }
    })
  })
})
onBeforeMount(() => {
  mitt.off("dataEmit")
})

// tiaozhuan 
const router = useRouter()
const toPage = (url: string): void => {
  router.push({
    path: url,
    // query: {
    //   value: [5, 6]
    // }
  })
}
async function async1() {
  console.log('async1 start');
  // 核心就是await之后的代码全放在微任务里了
  await async2();
  console.log('asnyc1 end');
}
async function async2() {
  console.log('async2');
}
console.log('script start');
setTimeout(() => {
  console.log('setTimeOut');
}, 0);
async1();
console.log("???");
new Promise(function (reslove) {
  console.log('promise1');
}).then(function () {
  console.log('promise2');
})
console.log('script end');

const infData = reactive({
  name: {
    value: "555"
  }
})
let baseData = "425"
const changeData = () => {
  baseData = "444"
  console.log(baseData);
}
const objData = { name: "wcy" }
onMounted(() => {
  setInterval(() => {
    // infData.name.value=infData.name.value+"5"
    // value.value=value.value+"5"
  }, 100)
})

const objReactData = reactive({
  age: 18
})

const arr = shallowRef([1, 3
  // {
  //   a:5
  // },
  // {
  //   a:6
  // }
])
const testa = 5
</script>
<template>
  <div class="layout">
    <div>
      <h1>HOME</h1>
      <br />
    </div>
    <button @click="changeData">change</button>
    <!-- <RouterLink to="/draw">draw</RouterLink>
    <button @click="toPage('/chart')">跳转</button>

    <div>
      <MenuVue />
    </div>
    <div style="height: 200px;width: 200px;">
      <RouterView />
    </div> -->
    {{ arr }}
    <!-- 看到数组里的对象之后就会用reactive将对象的每个属性变成响应式 -->
    <!-- <el-input v-model="arr[0].a" placeholder="" size="normal" clearable @change=""></el-input> -->

    <el-input v-model="arr" placeholder="" size="normal" clearable @change=""></el-input>
    
    <!-- <template v-for="(item, index) in arr" :key="index">
      <el-input v-model="arr[index]" placeholder="" size="normal" clearable @change=""></el-input>
    </template> -->
    <el-input v-model="testa" placeholder="" size="normal" clearable @change=""></el-input>

    <el-input v-model="objReactData.age" placeholder="" size="normal" clearable @change=""></el-input>


    <el-select v-model="value" placeholder="Select" @change="selectChange">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
    <button @click="deleteComp">删除组件</button>
    <div>
      <p>当前数据</p>
      {{ data }}

    </div>
    <el-input v-model="infData.name.value" placeholder="" size="normal" clearable @change=""></el-input>

    <div class="contain" v-if="value != ''">
      <ChartVue class="chartVue" :num="value" :data="dataComputed" :infData="infData" :baseData="baseData"
        :objData="objData" :objReactData="objReactData">
        <!-- <template #slotColor>
          <div id="div1">111</div>
        </template> -->
      </ChartVue>
    </div>
  </div>
</template>

<style lang='less' scoped>
.chartVue {

  // 为啥你优先级高啊,似乎永远都是父组件优先级高×
  // border: 2px solid tomato;
  :deep(.el-input__wrapper) {
    background-color: antiquewhite;
  }

  #div1 {
    color: aquamarine;
  }
}
</style>